<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
    /*---------graph---------*/
        body {
            padding: 0;
            margin: 0;
            background-color: rgb(57, 57, 57);
        }
       
        .pink {
        position: absolute;
        left: 32%;
        top: 32%;
        animation: pink1 2.5s infinite;
        }

        .yellow {
        position: absolute;
        left: 42%;
        top: 32%;
        animation: yellow1 2.5s infinite 0.5s;
        }

        .red {
        position: absolute;
        left: 52%;
        top: 33%;    
        animation: red1 2.5s infinite 1s;
        }

        .blue {
        position: absolute;
        left: 62%;
        top: 33%;    
        animation: blue1 2.5s infinite 1.5s;
        }
    /*---------graph---------*/
   
    /*---------animation*---------*/
    @keyframes pink1 {
        0%    {top:32%;}
        50%   {top:29%;}
        100%  {top:32%;}
    }

    @keyframes yellow1 {
        0%    {top:32%;}
        50%   {top:29%;}
        100%  {top:32%;}
    }

    @keyframes red1 {
        0%    {top:33%;}
        50%   {top:29%;}
        100%  {top:33%;}
    }

    @keyframes blue1 {
        0%    {top:33%;}
        50%   {top:29%;}
        100%  {top:33%;}
    }
    /*---------animation*---------*/

   
    </style>
</head>
<body>
    <div class="animate-box">
        <div class="pink"><img src="./图片/pink.png" width="80px"></div>
        <div class="yellow"><img src="./图片/yellow.png" width="80px"></div>
        <div class="red"><img src="./图片/red.png" width="80px"></div>
        <div class="blue"><img src="./图片/blue.png" width="80px"></div>
        
    </div>
    <script>  
        document.addEventListener('DOMContentLoaded', function() {  
            function checkIfAnimationsFinished() {  
                setTimeout(function() {  
                    window.location.href = 'Dubstep.html';  
                }, 3800);  
            }  
            checkIfAnimationsFinished();  
        });  
        </script>  
</body>
</html>